<template>
    <div class="app-container">
        <el-tabs v-model="activeName" v-bind="$attrs" v-on="$listeners">
            <template v-for="(item,index) in tabList">
                <el-tab-pane :label="item.label" :name="item.name" :key="index" v-if="item.visible">
                    <template slot="label" v-if="item.badgeNum">
                        <el-badge :value="item.badgeNum" class="item">
                            {{item.label}}
                        </el-badge>
                    </template>
                    <template v-if="activeName==item.name||item.hasBadge">
                        <slot :item="item">

                        </slot>
                    </template>
                </el-tab-pane>
            </template>
        </el-tabs>
      <slot name="right-btn"></slot>
    </div>
</template>
<script>
    import eventBus from "@/utils/eventBus";
    import { mapGetters } from 'vuex'
    export default {
        name: "DocumentTab",
        props:{
          tabList:{
            type:Array,
            default:()=>[]
          },
          hasPermis:{
            type:Boolean,
            default:false
          },
          defaultActiveName:{
            type:String,
            default:"daiban"
          }
        },
        data() {
            return {
                activeName: 'daiban',
                toDoNum: 0,
                toReadNum: 0,
            };
        },
        components: {
        },
        created() {
            this.activeName = this.defaultActiveName
            this.chackPermissions()
            this.getFirstName()

        },
        mounted() {
            eventBus.$on("setActiveName", (activeName) => {
                this.activeName = activeName
            });
            eventBus.$on("setNumByCategory", (params) => {
                for (let i = 0; i < this.tabList.length; i++) {
                  let item = this.tabList[i]
                    if(params.category == item.params.category){
                      this.$set(this.tabList[i],"badgeNum",params.num)
                      break
                    }
                }
                this.$forceUpdate()
            });
        },
        computed:{
          ...mapGetters(["linkParams"]),
        },
        methods: {
            handleClick(tab) {
            },
            chackPermissions() {
                this.tabList.map(item => {
                    item.visible = this.hasPermis?true:item.visible?item.visible:this.hasPermissions(item.name)
                })
            },
            getFirstName() {
                for (let i = 0; i < this.tabList.length; i++) {
                    let item = this.tabList[i]
                    if (item.visible) {
                      if(item.params&&item.params.category){
                        if(this.linkParams.category == item.params.category){
                          this.activeName = item.name
                          break
                        }
                      }
                    }
                }
            }
        },
        beforeDestroy() {
            eventBus.$off("setActiveName")
            eventBus.$off("setNumByCategory")
        }
    };
</script>
<style lang="scss" scoped>
    ::v-deep .el-badge {
        .el-badge__content.is-fixed {
            top: 13px;
            right: 4px;
        }
    }
</style>

